<template>
  <el-container>
    <el-header>
      <el-col id="logo" :span="8" :offset="1">
        <a href="/static/home/">
          <img
            src="../assets/logo.png" height="60" width="180"
          />
        </a>
      </el-col>
      <el-col id="title" :span="9" v-if="$store.state.PC" style="margin-left: 75px">
        云想打磨产线运维系统
      </el-col>
      <el-col id="menu" :span="2">
        <el-dropdown>
          <span class="el-dropdown-link">
           欢迎您： {{ $store.state.name }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <el-popover
                placement="bottom"
                width="200"
                trigger="click"
              >
                <p>工号： {{ username }}</p>
                <p>姓名： {{ $store.state.name }}</p>
                <p>身份： {{ $store.state.role }}</p>
                <p></p>
                <el-button type="text" slot="reference">用户信息</el-button>
              </el-popover>
            </el-dropdown-item>
            <el-dropdown-item>
              <span @click="logoutHome()">退出登录</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-header>
    <el-container>
      <el-aside :width="isCollapse ? '200px' : '65px'" style="height: 90vh">
        <div class="toggle-button" @click="toggleCollapse">
          <i v-if="isCollapse" class="el-icon-s-fold"></i>
          <i v-if="!isCollapse" class="el-icon-s-unfold"></i>
        </div>
        <el-menu
          style="height: 90%"
          background-color="#F5F5F5"
          class="el-menu-vertical-demo"
          :collapse="!isCollapse"
          :collapse-transition="false"
          :router="true">
          <el-menu-item index="1" route="add_users">
            <i class="el-icon-menu"></i>
            <span slot="title">新增用户</span>
          </el-menu-item>
          <el-menu-item index="2" route="users">
            <i class="el-icon-s-custom"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
          <el-menu-item index="3" route="add_users" @click="goHome">
            <i class="el-icon-close"></i>
            <span slot="title">返回主页</span>
          </el-menu-item>
          <!-- -->
        </el-menu>
      </el-aside>
      <el-container>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
        <el-footer>
          <div style="line-height: 35px" v-if="$store.state.PC">©山东云想技术有限公司</div>
      <div style="font-size: small; color: gray; font-style: italic">
        Developed by 西安交通大学 网络化智造与服务系统工程团队</div>
    </el-footer>
  </el-container>
</template>

<script itemscope>

export default {
  name: 'User',
  created() {
    this.loadConfig();
    this.getName();
  },
  computed: {
    username() {
      const store = JSON.parse(localStorage.getItem('store'));
      if (store) {
        const { username } = store;
        return username;
      }
      return '工号';
    },
  },
  data() {
    return {
      admin: true,
      appList: [],
      user: [],
      softwareListWidth: 6,
      importDialogVisible: false,
      isCollapse: true,
    };
  },
  methods: {
    loadConfig() {
      this.axios({
        method: 'get',
        url: '/home/app_list/load_config/',
        timeout: 10000,
      })
        .then((response) => {
          console.log(response);
          if (response.data === 0) {
            this.$alert('配置文件异常', '错误', {
              confirmButtonText: '确定',
              callback: () => {
                localStorage.clear();
                this.$router.push('/');
              },
            });
          } else {
            this.appList = response.data;
            console.log(response.data);
          }
        });
      // .catch(() => {
      //   this.showErrorMessage('未获取到数据！');
      // });
    },
    getName() {
      const { username } = this;
      this.axios({
        method: 'get',
        url: '/home/user/',
        params: {
          username,
        },
        timeout: 10000,
      })
        .then((response) => {
          const user = response.data[0].first_name;
          localStorage.setItem('userName', user);
          this.$store.dispatch('saveName', user);
        });
      // .catch(() => {
      //   this.showErrorMessage('未获取到数据！');
      // });
    },
    reload() {
      this.importDialogVisible = false;
      this.$router.go(0);
    },
    goHome() {
      this.$router.push('/home');
    },
    logoutHome() {
      console.log('Hello');
      localStorage.clear();
      this.$router.push('/');
    },
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
  },
};
</script>

<style scoped lang="scss">
.el-header {
  background-color: #87CEFA;
  color: #FFFFFF;
  line-height: 60px;
  font-size: x-large;
  -webkit-user-select: none;
}

#menu {
  text-align: center;
  margin-top: -2px;
  position: fixed;
  right: 20px;
}

.import {
  text-align: center;
  margin-top: -2px;
}

.el-aside {

}

.el-main {
  padding-bottom: 60px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: aliceblue;
  color: #333;
  text-align: center;
}

.el-dropdown-link {
  cursor: pointer;
  color: #FFFFFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.softwareCard {
  margin-top: 4px;
  text-align: center;
}

.toggle-button {
  background-color: #F5F5F5;
  font-size: 10px;
  line-height: 24px;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}

.el-icon-s-fold{
  font-size: 20px;
}

.el-icon-s-unfold{
  font-size: 20px;
}
</style>
